@import url('https://fonts.googleapis.com/css2?family=Rubik+Broken+Fax&family=Syne+Mono&display=swap');

:root {
    --primary: #e20421;
    --background: #02030c;
    --transparent:#02030c79;
    --rubik: "Rubik Broken Fax", system-ui;
    --syneMono: "Syne Mono", sans-serif;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* * {
    outline: 1px solid rgb(56, 56, 56);
} */
html{
    background:var(--background);
    font-family:sans-serif;
    z-index: 1;
}


h1, h2, h3{
    text-transform: uppercase;
    font-family: var(--syneMono);
}

a{
    text-decoration: none;
    color: var(--primary);

    &:hover{
        color: #ffffff;
        filter: drop-shadow(0px 0px 5px #ffffff);
        transition: ease-in 0.15s;
    }
}

.wrapper, .menu-wrapper{
    max-width: 1024px;
    margin: 20px auto;
    background-color: var(--background);
    color: #ffffff;
    border:4px solid var(--primary);
    position: relative;
    z-index: 3;
    /* filter: drop-shadow(0px 0px 5px var(--primary)); */

}

.background-box,
.background-overlay{
    /* background:#e2042273; */
    position: fixed;
    /* z-index:2; */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.background-box{
    background-image:url(../css/background.jpg);
      -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  background-size:400px;
}


header{
    background-color: var(--background);
    h1{
        font-size: 46px;
        text-align: center;
        padding: 20px;
        color: var(--primary);
        font-family: var(--rubik);
        filter: drop-shadow(0px 0px 5px var(--primary));
    }
    h3{
        color: var(--primary);
        text-align: center;
        padding: 0 20px 20px 20px;
    }
    nav{
        /* background-color:red; */
        ul{
            display: flex;
            justify-content: space-evenly;
        }  
        li{
            text-transform: uppercase;
            padding: 10px;
            font-family: var(--syneMono);
            font-size: 22px;
        }
    }
}
main{
    padding: 20px;
}

section{

    &:not(:last-of-type){
        margin-bottom: 20px;
        border-bottom: 2px solid var(--primary);
        padding-bottom: 20px;
    }
    h2{
        font-size: 22px;
        margin-bottom: 10px;
        color: var(--primary)
    }

}
/* .card-header{
    background: var(--transparent);
} */
.menu-wrapper{
    max-width: 425px;
}

.mobile-menu{
    flex-direction: column;
    text-align: center;
    padding-bottom: 20px;
}

.grid-container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  figure img{
    max-width: 250px;
  }
}

.submenu{
    display: flex;
    flex-direction: column;

    li{
        margin: 10px;    
        background: var(--primary);
        border: 2px solid var(--primary);
        a{
        color: var(--background);
        padding: 15px;
        display: inline-block;
        width: 100%;
                    h4{
                color: #ffffff;
                font-size: 23px;
                margin-bottom:5px;
            }
        }        
    }
    li:hover{
        background: var(--background);
        transition: ease-in 0.15s;
        a{
            color: var(--primary);
            filter: drop-shadow(0px 0px 5px var(--primary));
            transition: ease-in 0.15s;

        }
    }
}

.contact-menu{
    justify-content: center;
    svg{
          fill: var(--primary);
          width: 25px;
    }
    svg:hover{
        fill: #ffffff;
        transition: ease-in 0.15s;
    }

}